<template>
    <div class="">
        <div class="top-group">
            <el-button type="primary" @click="onAddHostButtonClick()">
                <el-icon :size="15" style="padding-right: 5px;">
                    <Plus />
                </el-icon>新增Host</el-button>
        </div>

        <el-table :data="project.host_list" style="width: 100%">
            <el-table-column prop="name" label="名称">
            </el-table-column>
            <el-table-column prop="host" label="Host">
            </el-table-column>
            <el-table-column prop="description" label="描述">
            </el-table-column>
            <el-table-column label="操作" width=300>
                <template v-slot="scope">
                    <el-button type="primary" size="mini" @click="onEditHostButtonClick(scope.row)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="onDeleteHost(scope.row, scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 添加host的弹窗 -->
        <el-dialog style="padding: 20px 60px;" v-model="hostDialogVisible" title="编辑Host信息">
            <el-form ref="hostForm" :model="hostForm" :rules="hostRules">
                <el-form-item style="padding-bottom: 20px;" label="Host 名称" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="hostForm.name" autocomplete="off" />
                </el-form-item>
                <el-form-item style="padding-bottom: 20px;" label="Host 地址" :label-width="formLabelWidth" prop="host">
                    <el-input v-model="hostForm.host" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item style="padding-bottom: 20px;" label="Host 描述" :label-width="formLabelWidth"
                    prop="description">
                    <el-input type="textarea" v-model="hostForm.description" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="hostDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="onSubmitAddHost">
                        确 定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "ProjectInfo",
    props: ['project'],
    data: () => ({
        hostDialogVisible: false,
        dialogType: "add",
        hostForm: {
            name: "",
            host: "",
            description: ""
        },
        hostRules: {
            name: [{ required: true, trigger: "blur", message: "请输入host名称！" }],
            host: [{ required: true, trigger: "blur", message: "请输入host！" }]
        }
    }),
    components: {
        ElMessage
    },
    methods: {
        sent_message(msg, type) {
            ElMessage({
                message: msg,
                type: type,
            })
        },
        message_box() {
            ElMessageBox.confirm(
                '确定执行此操作?',
                '警告',
                {
                    confirmButtonText: '确 定',
                    cancelButtonText: '取 消',
                    type: 'warning',
                }
            )
        },
        // 初始化表单方法
        initHostForm() {
            this.hostForm = {
                name: "",
                host: "",
                description: ""
            }
        },
        // 点击添加host按钮弹出dialog对话框
        onAddHostButtonClick() {
            this.dialogType = 'add'
            this.hostDialogVisible = true
            this.initHostForm()
        },
        //点击编辑按钮，带入编辑的host信息
        onEditHostButtonClick(host) {
            this.hostForm = {
                name: host.name,
                host: host.host,
                description: host.description,
                id: host.id
            }
            this.hostDialogVisible = true
            this.dialogType = "edit"
        },
        onSubmitAddHost() {
            this.$refs['hostForm'].validate(valid => {
                if (!valid) {
                    return
                }
                if (this.dialogType == 'add') {
                    const params = JSON.parse(JSON.stringify(this.hostForm))
                    params.project_id = this.project.id
                    this.$http.addHost(params).then(res => {
                        console.log(res)
                        const host = res.data
                        this.hostDialogVisible = false
                        this.hostForm = {
                            name: "",
                            host: "",
                            description: ""
                        }
                        this.project.host_list.push(host)
                        this.sent_message("添加host成功", "success")
                    })
                } else {
                    const params = JSON.parse(JSON.stringify(this.hostForm))
                    params.project_id = this.project.id
                    this.$http.editHost(this.hostForm.id, params).then(res => {
                        this.hostDialogVisible = false
                        this.initHostForm()
                        this.sent_message("Host修改成功！", "success")
                        this.dialogType="add"
                        const host = res.data
                        let index = 0
                        for (let loop_host of this.project.host_list) {
                            if (loop_host.id == host.id) {
                                this.project.host_list.splice(index, 1, host)
                                break
                            }
                            index++
                        }
                    })
                }

            })
        },
        onDeleteHost(host, index) {
            ElMessageBox.confirm(
                '确定执行此操作?',
                '警告',
                {
                    confirmButtonText: '确 定',
                    cancelButtonText: '取 消',
                    type: 'warning',
                }
            ).then(() => {
                this.$http.deleteHost(host.id).then(res => {
                    this.project.host_list.splice(index, 1)
                    this.sent_message("删除成功", "success")
                })
            }).catch(() => {
                this.sent_message("取消操作！", "info")
            })
        }
    }
}
</script>
    
<style scoped lang='scss'>
.top-group {
    padding: 30px 0;
}
</style>